<template>
  <div class="app-container flex-column">
    <div class="flex-between mt10 mb10">
      <div></div>
      <div>
        <el-button type="primary" @click="newDictData">新增</el-button>
        <el-button type="danger" icon="el-icon-refresh" @click="handleRefreshCache">刷新缓存</el-button>

      </div>
    </div>
    <el-table :data="tableList" :height="tableheight" border stripe @row-click="getrow" row-key="dept_id"
      :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :row-class-name="tableRowClassName" highlight-current-row style="flex: 1; margin-bottom: 10px;">
      <el-table-column prop="dept_name" width="260" header-align="center" label="部门名称"></el-table-column>
      <el-table-column label="备注" header-align="center" prop="remark" show-overflow-tooltip />
      <el-table-column label="状态" width="100" header-align="center" align="center" prop="status" show-overflow-tooltip>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" header-align="center" prop="createtime" width="160" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" header-align="center">
        <template scope="scope">
          <el-link type="primary" @click="EditDictData(scope.row )">修改</el-link>
          <el-link type="primary" class="ml10" @click="handleDelete(scope.row )">删除</el-link>
          <el-link type="primary" class="ml10" @click="moveup(scope.row.dept_id,scope.row.parent_id )">上移</el-link>
          <el-link type="primary" class="ml10" @click="movedown(scope.row.dept_id,scope.row.parent_id)">
            下移
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <edit :dialogedit.sync="dialogedit" :depid="depid" @reload="getList" />
  </div>
</template>

<script>
  import {
    listDept,
    delDept,
    upDept,
    downDept,refreshCache
  } from '@/api/system/dept';
  import edit from './edit';
  export default {
    name: "dept",
    components: {
      edit
    },
    dicts: ['sys_normal_disable'],
    data() {
      return {
        isExpandAll: true,
        // 岗位表格数据
        total: 0,
        currow: {},
        tableList: [],
        tableheight: 400,
        // 查询参数
        queryParams: {},
        getindex: -1,
        depid: '',
        dialogedit: false
      };
    },
    created() {
      this.getList();

    },
    mounted() {
      this.$nextTick(() => {
        this.settableheiht();
        window.onresize = () => {
          this.settableheiht();
        };
      });
    },
    methods: {
      handleRefreshCache() {
        refreshCache().then(() => {
          this.$modal.msgSuccess("刷新成功");
        });
      },
      moveup(dept_id, parent_id) {
        let params = {
          dept_id: dept_id,
          parent_id: parent_id
        };
        upDept(params).then(response => {
          this.getList();
        }).catch(err => {

        });
      },
      movedown(dept_id, parent_id) {
        let params = {
          dept_id: dept_id,
          parent_id: parent_id
        };
        downDept(params).then(response => {
          this.getList();
        }).catch(err => {

        });
      },
      /** 删除按钮操作 */
      handleDelete(currow) {
        let row = currow;
        const dept_name = row.dept_name;
        var Params = {
          dept_id: row.dept_id
        }
        this.$modal
          .confirm(`是否确认删除?部门名称:${dept_name}？`)
          .then(function() {
            return delDept(Params);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess('删除成功');
          })
          .catch(() => {});

      },
      /** 修改岗位列表 */
      EditDictData(currow) {
        let row = currow;
        this.depid = row.dept_id;
        this.dialogedit = true;
      },
      /** 新增岗位列表 */
      newDictData() {
        this.depid = '';
        this.dialogedit = true;
      },
      /** 查询部门列表 */
      getList() {
        this.getindex = -1;
        listDept().then(response => {
          this.total = response.rows.length;
          this.tableList = this.handleTree(response.rows, "dept_id", "parent_id");

        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.currow = row;
        this.getindex = row.index;
      },
      handleRefreshCache() {
        refreshCache().then(() => {
          this.$modal.msgSuccess("刷新成功");
        });
      },
      settableheiht() {
        var clientHeight = document.body.clientHeight;
        clientHeight = clientHeight - 220;
        this.tableheight = clientHeight;
      }
    }
  };
</script>
